<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <keep-alive
        :include="['CollegeVolunteer', 'SearchCollege', 'SearchMajor', 'Graph']"
      >
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup>
import { watch, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { useVolunteerStore } from '@/store/volunteer';
import { recodeSelectOne } from '@/api/volunteer';

const store = useVolunteerStore();

const currentRoute = useRoute();

const recodeSelectOneFn = async () => {
  const params = {
    recordType: 10,
  };
  const res = await recodeSelectOne(params);
  if (res.code == 200 && res.data.searchContent) {
    store.setVolunteerInfo(JSON.parse(res.data.searchContent));
  }
};

onBeforeMount(() => {
  recodeSelectOneFn();
});

watch(
  () => currentRoute.query,
  (newQuery) => {
    if (newQuery.token) {
      localStorage.setItem('token', newQuery.token);
    }
  }
);
</script>

<style>
#app {
  user-select: none;
}
/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
